<template>
  <div class="el-scrollbar__view" v-loading="loading">
    <section class="el-container list">
      <el-col :span="3" :xs="24">
        <el-card class="el-card" :body-style="{ height:'821px', padding:'1px'}">
         <div style="text-align:left; margin-top:30px; margin-left:20px"><h3>模板分类</h3></div>
         <HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#E4E6E9 SIZE=1></HR>
         <div style="margin-left:13px; margin-top:20px;">
           <el-tree
            :data="classificationOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          />
         </div>
        </el-card>
      </el-col>

      <el-col :span="21" :xs="24">
        <el-card class="el-card-right" :body-style="{ height:'821px', padding:'1px'}">
          <div class="queryForm">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
              <el-form-item label="名称" prop="name">
                <el-input
                  v-model="queryParams.screenName"
                  placeholder="请输入名称"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item label="模板行业">
                <el-select v-model="queryParams.industry" placeholder="请选择">
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="模板场景">
                <el-select v-model="queryParams.scenario" placeholder="请选择">
                  <el-option
                    v-for="item in scenarioOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否发布">
                <el-select v-model="queryParams.isReleased" placeholder="请选择">
                  <el-option
                    v-for="item in releasedOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="content">
            <div class="content__item" v-for="(item, index) in screenList" :key="index">
              <div class="content__info">
                <img
                  :src="item.capturePath != null ? basePath + item.capturePath : 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'"
                  class="image"
                  @click="view(item.screenId)"
                />
              </div>
              <div class="content__main">
                <span class="content__name">{{item.screenName}}</span>
                <div class="content__menulist">
                  <div class="content__view">
                    <i
                      class="el-tooltip el-icon-document-copy"
                      aria-describedby="el-tooltip-1883"
                      tabindex="0"
                      @click="copy(item)"
                      title="复制模板"
                      v-hasPermi="['datav:screen:copyApply']"
                      style="cursor: pointer"
                    ></i>
                    <i
                      :class="'el-tooltip ' + (item.isReleased == '1'? 'el-icon-star-on':'el-icon-star-off')"
                      aria-describedby="el-tooltip-2809"
                      tabindex="0"
                      :title="item.isReleased == '1'? '取消发布':'发布模板'"
                      @click="release(item)"
                      style="cursor: pointer"
                    ></i>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="page">
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </el-card>
      </el-col>
    </section>


    <!-- 数据大屏保存参数配置对话框 -->
    <el-dialog :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板名称" prop="screenName">
              <el-input v-model="form.screenName" placeholder="请输入大屏名称" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="模板标签" prop="dynamicTags">
              <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="模板简介" prop="screenIntroduction">
              <el-input v-model="form.screenIntroduction" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="模板行业" prop="industry" >
              <el-select v-model="form.industry" placeholder="请选择">
                <el-option
                  v-for="item in industryOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="模板场景" prop="scenario">
              <el-select v-model="form.scenario" placeholder="请选择">
                <el-option
                  v-for="item in scenarioOptions"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { listScreen, delScreen, copyApply, getUserList, shareScreen } from "@/api/tool/datav/screenApi";
import { listTemplate,releaseTemplate, addTemplate,updateTemplate,copyTemplate } from "@/api/tool/datav/cmsTemplateInfo"
import { treeselect } from "@/api/tool/datav/classification";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { codeGen } from './codegen/codegen'

export default {
  data() {
    return {
      //服务器根路径
      basePath: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 数据大屏表格数据
      screenList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        screenName: undefined,
        keyword:'',
        orderBy:'1',
        isPublic: undefined,
        isTemplate: undefined,
        belongto: undefined,
        status: undefined,
      },
      //currentPage: 3,
      // 数据大屏模板分类树选项
      classificationOptions: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        screenName: [
          { required: true, message: "模板名称不能为空", trigger: "blur" },
        ],
        screenIntroduction: [
          { required: true, message: "模板简介不能为空", trigger: "blur" },
        ],
        industry: [
          { required: true, message: "请选择模板行业", trigger: "blur" },
        ],
        scenario: [
          { required: true, message: "请选择模板使用场景", trigger: "blur" },
        ],
      },
      users:[],
      shareScreenId:'',
      shareScreenName: '',
      currentPage: 1,// 当前页码
      pageSize:10,
      industryOptions:[],//模板行业
      scenarioOptions:[],//模板使用场景
      releasedOptions:[],//是否发布
      dynamicTags: [],
      inputVisible: false,
      inputValue: ''
    };
  },
  created() {
    this.getTreeselect();
    this.getList();
    this.getDicts("cms_template_industry").then(response => {
      this.industryOptions = response.data
    });
    this.getDicts("cms_template_scenario").then(response => {
      this.scenarioOptions = response.data
    });
    this.getDicts("cms_template_released").then(response => {
      this.releasedOptions = response.data
    });
  },
  methods: {
    /** 查询数据大屏列表 */
    getList() {
      this.loading = true;
      listTemplate(this.queryParams).then(response => {
        this.screenList = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.screenName = ''
      this.queryParams.industry = ''
      this.queryParams.scenario = ''
      this.queryParams.isReleased = ''
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 大屏模板添加 */
    add() {
      //直接跳转
      //this.$router.push("/tool/datav/datavDraw");
      this.$router.push({path: '/tool/datav/datavDraw', query: {screenId: ''}});
    },
    view(id) {
      //this.$router.push({path: "/tool/datav/datavRelease", query: {screenId: id}});
      const viewRuter = this.$router.resolve({path: "/tool/datav/datavRelease", query: {screenId: id}})
      window.open(viewRuter.href,'_blank')
    },
    copy(item) {
      this.$confirm("是否复制“"+ item.screenName+"”","提示",{
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(()=>{
        copyTemplate(item.id).then(res => {
          if(res.code == 200){
            this.msgSuccess("复制成功")
            this.getList()
          }
          else{
            this.msgError(res.msg);
          }
        })
      })
    },
    release(item) {
      this.dynamicTags = []
      if(item.isReleased != '1'){
        this.form = item
        if(this.form.screenTag != null){
          this.dynamicTags = this.form.screenTag.split("$!@*#")
        }
        this.open = true
      }
      else if(item.isReleased == "1"){
        this.$confirm('是否取消发布“'+ item.screenName +'”?', "提示",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(()=>{
          let params = {id:item.id, isReleased:'0'}
          releaseTemplate(params).then(response =>{
            if(response.code == 200 && response.data != 0){
              this.getList();
            }
          })
        })
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    /** 查询下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.classificationOptions = response.data;
      });
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (data.id == '1') {
        this.queryParams.belongto = '';
      } else {
        this.queryParams.belongto = data.id;
      }
      this.getList();
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    //确认发布
    submitForm: function() {
      this.form.screenTag = this.dynamicTags.join("$!@*#")
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.isReleased = '1'
          if(this.form.id == null){
            addTemplate(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("发布成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
          else {
            updateTemplate(this.form).then(response =>{
              if (response.code === 200) {
                this.msgSuccess("发布成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            })
          }
        }
      });
    },
    //翻页
    handleCurrentChange(val) {
        this.currentPage = val;
    },

    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  },
};
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.list .el-menu {
  border-right: none;
}
.list .el-menu.el-menu--horizontal {
  border-color: #212528;
  border-width: 2px;
}
.list .page {
  padding: 10px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.list .el-menu i {
  margin-right: 5px;
}
.list .content {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.list .content,
.list .content__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.list .content__item {
  position: relative;
  margin: 16px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 258px;
  height: 184px;
  border: 1px solid #3a4659;
  overflow: hidden;
}
.list .content__item:hover {
  -webkit-box-shadow: 0 0 20px 0 #000;
  box-shadow: 0 0 20px 0 #000;
  border: 1px solid #00baff;
}
.list .content__item--add {
  height: 184px;
  width: 258px;
  border: 1px solid #00baff;
  font-size: 14px;
  color: #8eeeff;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(0, rgba(0, 222, 255, 0.39)),
    to(rgba(0, 174, 255, 0.19))
  );
  background-image: linear-gradient(
    -90deg,
    rgba(0, 222, 255, 0.39),
    rgba(0, 174, 255, 0.19)
  );
  -webkit-box-shadow: 0 0 10px 0 rgba(55, 224, 255, 0.3);
  box-shadow: 0 0 10px 0 rgba(55, 224, 255, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}
.list .content__item--add i {
  display: block;
  padding-bottom: 10px;
  text-align: center;
  font-size: 19px;
  color: #000;
}
.list .content__item--add p {
  letter-spacing: 2px;
  color: #000;
}
.list .content__main {
  font-size: 12px;
  width: 100%;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background: #1d262e;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 10px;
  color: #bcc9d4;
}
.list .content__main a {
  color: #bcc9d4;
}
.list .content__main i {
  margin-right: 1px;
}
.list .content__view {
  margin-right: 2px;
}
.list .content__menulist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.list .content__menulist i {
  margin-right: 10px;
}
.list .content__status--active {
  color: #fff;
}
.list .content__name {
  width: 100px;
  padding: 0 5px;
  line-height: 28px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid transparent;
}
.list .content__info {
  position: relative;
  height: calc(100% - 36px);
}
.list .content__menu {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(29, 38, 46, 0.8);
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.list .content__btn {
  display: inline-block;
  vertical-align: middle;
  height: 32px;
  line-height: 32px;
  padding: 0 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  text-align: center;
  font-size: 14px;
  background-image: linear-gradient(-225deg, #00d3f1, #12b3ff);
  color: #293f52;
  border: none;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  cursor: pointer;
}
.list .content__info img {
  width: 100%;
  height: 100%;
}

.queryForm {
    padding: 20px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

}
.el-card {
  margin: 15px;
}
.el-card-right {
  margin-left: 0px !important;
}
.tips{
  font-size: 12px;
  color: rgb(75, 75, 75);
}
.el-tag + .el-tag {
    margin-right: 10px;
}
.el-tag--medium {
  margin-right: 10px;
}
.button-new-tag {
  margin-right: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-right: 10px;
  vertical-align: bottom;
}
</style>
